<template>
  <view class="ver-layout">
    <!--  商品头部  -->
    <view class="goods-title hor-layout-side-center">
      <view class="goods-title-text">商品名称</view>
      <u-input v-model="form.name" placeholder="请输入商品名称"/>
    </view>
    <!--  上传商品缩略图  -->
    <view class="ver-layout">
      <view class="upload-image-view hor-layout-center">
        <view class="flag">*</view>
        <view class="text">上传商品缩略图</view>
      </view>
      <view class="upload-btn ver-layout-center" @click="uploadImage">
        <block v-if="!form.image_path">
          <image class="add-icon" src="@/static/home/ic_goods_add_image.png"></image>
          <view class="hint">商品缩略图</view>
        </block>
        <block v-else>
          <image class="upload-image-display" :src="form.image_path"></image>
          <image class="close-icon" src="@/static/home/ic_goods_image_close.png"></image>
        </block>
      </view>
      <view class="divider-line"></view>
      <view class="upload-image-limit">*图片文件大小≤100Kb</view>
    </view>
    <!--  商品分类 -->
    <view class="part-line"></view>
    <view class="part-title-layout" style="background: #7183D5;">商品分类</view>
    <!--    <view class="part-item hor-layout-side-center">-->
    <!--      <view class=""><span>*</span><span class="part-title">兑换分类</span></view>-->
    <!--      <view class="hor-layout-center">-->
    <!--        <view class="part-text">请选择</view>-->
    <!--        <i class="iconfont">&#xe627;</i>-->
    <!--      </view>-->
    <!--    </view>-->
    <view class="part-item hor-layout-side-center">
      <view class=""><span>*</span><span class="part-title">类 目</span></view>
      <view class="hor-layout-center" @click="form.showCate=true">
        <view class="part-text">{{ form.cate.label ? form.cate.label : '请选择商品类目' }}</view>
        <i class="iconfont">&#xe627;</i>
      </view>
    </view>
    <u-select v-model="form.showCate" :list="cateList" :default-value="getSelectCate"
              @confirm="confirmSelect"></u-select>
    <view class="part-item hor-layout-side-center">
      <view class=""><span>*</span><span class="part-title">商品描述</span></view>
      <u-input class="part-input" v-model="form.description" placeholder="请输入商品描述"></u-input>
    </view>
    <!-- 型号价格   -->
    <view class="part-line"></view>
    <view class="part-title-layout" style="background: #F67562;">型号价格</view>
    <view class="part-item hor-layout-side-center">
      <view class=""><span>*</span><span class="part-title large">商品原价</span></view>
      <u-input type="number" class="part-input" v-model="form.price" placeholder="请输入商品原价"></u-input>
    </view>
    <view class="part-item hor-layout-side-center">
      <view class=""><span>*</span><span class="part-title large">库 存</span></view>
      <u-input type="number" class="part-input" v-model="form.storage" placeholder="请输入库存"></u-input>
    </view>
    <view class="part-item hor-layout-side-center">
      <view class=""><span>*</span><span class="part-title large">积分价格</span></view>
      <u-input type="number" class="part-input" v-model="form.points" placeholder="请输入积分价格"></u-input>
    </view>
    <view class="part-item hor-layout-side-center">
      <view class=""><span>*</span><span class="part-title large">限制兑换数量</span></view>
      <u-input type="number" class="part-input" v-model="form.limitnum" placeholder="请输入限制兑换数量"></u-input>
    </view>
    <!-- 配送方式   -->
    <!--    <view class="part-line"></view>-->
    <!--    <view class="part-title-layout" style="background: #B76FD3;">配送方式</view>-->
    <!--    <view class="part-item hor-layout-side-center">-->
    <!--      <view class=""><span>*</span><span class="part-title">配送方式</span></view>-->
    <!--      <view class="part-text">快递发货</view>-->
    <!--    </view>-->
    <!--    <view class="part-item hor-layout-side-center">-->
    <!--      <view class=""><span>*</span><span class="part-title">运费设置</span></view>-->
    <!--      <view class="part-text">免运费</view>-->
    <!--    </view>-->
    <!--    <view class="part-item hor-layout-side-center">-->
    <!--      <view class=""><span>*</span><span class="part-title">发货地址</span></view>-->
    <!--      <u-input class="part-input" placeholder="请输入发货地址"></u-input>-->
    <!--    </view>-->
    <view class="part-line" style="height: 58px"></view>
    <!--  底部操作栏  -->
    <view class="bottom-layout hor-layout">
      <view class="add-in-warehouse" @click="addGoods(0)">放入仓库</view>
      <view class="add-on-shelf" @click="addGoods(1)">上架兑换</view>
    </view>
  </view>
</template>

<script>
import {GoodsManageApi} from "@/api/goodsManage.js"
import uploadFile from '@/common/ossutil/uploadFile.js'
import {goodsList} from "@/router.js"

let engine = new GoodsManageApi()
export default {
  name: "addGoods",
  data() {
    return {
      form: {
        image_path: '',//图片展示路径
        image: '',
        name: '',
        cate_id: '',
        cate: {},
        price: '',
        showCate: false,
      },
      cateList: []
    }
  },
  computed: {
    getSelectCate() {
      let index = this.cateList.findIndex(cate => cate.value === this.form.cate.value)
      return [index]
    }
  },
  onLoad() {
    this.getGoodsTypes()
  },
  methods: {
    getGoodsTypes() {
      engine.getGoodsTypes().then(res => {
        let {goods_cates} = res.data
        this.cateList = goods_cates.map(cate => {
          return {label: cate.name, value: cate.id}
        })
      })
    },
    addGoods(status) {//status:状态【1上架0下架】
      engine.addGoods({status, ...this.form}).then(res => {
        this.$u.toast(res.message)
        if (res.code === 200) {
          this.$u.pageCallBackDelay(goodsList,'refreshData','')
          this.$u.routeDelay({type: 'back'})
        }
      }).catch(err => this.$u.toast(err.message))
    },
    confirmSelect(e) {
      this.form.cate = e[0]
      this.form.cate_id = e[0].value
    },
    uploadImage() {
      uni.chooseImage({count: 1}).then(res => {
        let path = res[1].tempFilePaths[0],
            file = res[1].tempFiles[0]
        uploadFile(path, file, (f_name, r_path) => {
          console.log("uploadFile", f_name, r_path)
          this.form.image_path = r_path
          this.saveImg(f_name)
        }, (err) => {
          console.error("uploadFile", err)
        })
      })
    },
    saveImg(path) {
      engine.saveResource(path).then(res => {
        this.form.image = res.data[0];
      }).catch(err => this.$u.toast(err.message))
    }
  }
}
</script>

<style scoped>
.goods-title {
  padding: 0px 12px;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #EEEEEE;
}

.goods-title-text {
  font-size: 16px;
  color: #333333;
  margin-right: 19px;
}

.upload-image-view {
  margin-top: 18px;
  margin-left: 16px;
}

.upload-image-view > .flag {
  font-size: 11px;
  color: #00A398;
  font-weight: bold;
  font-family: Source Han Sans CN;
}

.upload-image-view > .text {
  font-size: 15px;
  color: #333333;
  margin-left: 5px;
}

.upload-btn {
  position: relative;
  margin-top: 12px;
  margin-left: 24px;
  width: 68px;
  height: 68px;
  background: #F7F7F7;
}

.upload-image-display {
  width: 68px;
  height: 68px;
}

.upload-btn > .add-icon {
  margin-top: 15px;
  width: 18px;
  height: 18px;
}

.upload-btn > .hint {
  margin-top: 10px;
  font-size: 9px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #999999;
}

.upload-btn > .close-icon {
  position: absolute;
  right: -3px;
  top: -3px;
  width: 12px;
  height: 12px;
}

.divider-line {
  margin-top: 18px;
  width: 100%;
  height: 1px;
  background: #EEEEEE;
}

.upload-image-limit {
  height: 32px;
  line-height: 32px;
  padding-left: 24px;
  font-size: 8px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #999999;
}

.part-line {
  width: 100%;
  height: 18px;
  background: #F2F2F2;
}

.part-title-layout {
  width: 100%;
  height: 38px;
  line-height: 38px;
  padding-left: 28px;
  /* 文本样式 */
  font-size: 15px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #FFFFFF;
}

.part-item {
  padding-left: 15px;
  padding-right: 13px;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #EEEEEE;
}

.part-title {
  width: 60px;
  margin-left: 7px;
  text-align: justify;
  text-align-last: justify;
  display: inline-block;
  /* 文本样式 */
  font-size: 15px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #333333;
}

.part-title.large {
  width: 90px;
}

.part-text {
  font-size: 15px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #333333;
}

.part-input {
  width: 30px;
  margin-left: 26px;
  font-size: 15px;
  font-family: Source Han Sans CN;
  color: #999999;
}

.bottom-layout {
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 50px;
  border-top: 1px solid #EEEEEE;
}

.add-in-warehouse {
  flex: 1;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background: #FFFFFF;
  /* 文本样式 */
  font-size: 15px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #333333;
}

.add-on-shelf {
  flex: 1;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background: #42B4AB;
  /* 文本样式 */
  font-size: 15px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #FFFFFF;
}
</style>
